/**
 * Created by Administrator on 2017/9/22.
 */



$(function () {

    //登录之后获得用户名
    var str=window.location.search;
    str=decodeURIComponent(str);

    if(str.indexOf("?")!=-1&&str.indexOf("=")!=-1){
        var arr=str.split("?")[1].split("=");
        console.log(arr[1]);
        var A1= $("#header").find(".wrapper-l").children().eq(0)
        var A2= $("#header").find(".wrapper-l").children().eq(1)
        A1.html("亲爱的"+arr[1]+"用户，你好");
        A2.html("退出");
    }


    var obj=JSON.parse($.cookie("myLogin"));
    if(obj){
        $("#header").find(".wrapper-l").children().eq(0).html("欢迎"+obj.utel+"登录");
        $("#header").find(".wrapper-l").children().eq(1).html("<a href='login.html'>退出</a>");
    };





    //头部移入下拉
    var headerLi=$("#header").find(".header-ul>li")
    headerLi.on("mouseenter",function () {
        $(this).find("ul").stop().slideDown()
    })
    headerLi.on("mouseleave",function () {
        $(this).find("ul").stop().slideUp()
    })



    //图片运动
    $("#boost").animate({width:200,height:100},2000).animate({top:-41},2000).animate({left:0},2000).animate({top:0},2000).animate({left:-110},2000).animate({right:0,top:0,bottom:0,left:0,width:90,height:59},2000)

    setInterval(function () {
        $("#boost").stop().animate({width:200,height:100},2000).animate({top:-41},2000).animate({left:0},2000).animate({top:0},2000).animate({left:-110},2000).animate({bottom:0,right:0,top:0,left:0,width:90,height:59},2000)
    },12000);


    //轮播图一
    $("#banner").find("ol").children("li").on("click",function () {
        var index=$(this).index();
        $("#banner").find("ul").children("li").eq(index).stop().animate({opacity:1},500).siblings("li").animate({opacity:0},500);
        $(this).css("background","#f15c18").siblings("li").css("background","#333");
        num=index;
    })
    var timer=setInterval(autoPlay,2000);
    var num=0;
    function autoPlay() {
        num++;
        $("#banner").find("ul").children("li").eq(num).stop().animate({opacity:1},500).siblings("li").animate({opacity:0},500);
        $("#banner").find("ol").children("li").eq(num).css("background","#f15c18").siblings("li").css("background","#333");
        if(num==4){
            num=-1
        }
    }

    //移入清掉定时器
    $("#banner").on("mouseenter",function () {
        clearInterval(timer);
    })
    //移出加上定时器
    $("#banner").on("mouseleave",function () {
        timer=setInterval(autoPlay,2000);
    })



    //前三楼运动
    // 一楼运动
    $("#floor-top .wrapper>div:nth-of-type(1)").find(".top-ul1").find("li").on("mouseenter",function () {
        $(this).css({borderTop:"2px solid #f15c18",borderLeft:"1px solid #f15c18",borderRight:" 1px solid #f15c18",borderBottom:"2px solid #fff"}).siblings("li").css({border:0,borderBottom: "2px solid #f15c18",});

        var index=$(this).index();
        if(index==0){
            $("#floor-top .wrapper>div:nth-of-type(1)").find(".center-c").css({display:"block",});
            $("#floor-top .wrapper>div:nth-of-type(1)").find(".center-r").css({display:"none",});
        }
        if(index==1 || index==2 || index==3){
            $("#floor-top .wrapper>div:nth-of-type(1)").find(".center-r").css({display:"block",});
            $("#floor-top .wrapper>div:nth-of-type(1)").find(".center-c").css({display:"none",});
        }


    })
    //轮播图一楼
    var oUl1=$("#floor-top .wrapper>div:nth-of-type(1)").find(".top-banner").find("ul")
    var oOLi1=$("#floor-top .wrapper>div:nth-of-type(1)").find(".top-banner").find("ol").find("li");
    var Opacity1=$("#floor-top .wrapper>div:nth-of-type(1)").find(".center-r").find("ul").find("li");


//透明效果
    Opacity1.on("mouseenter",function () {
        $(this).stop().animate({opacity:1},200).siblings("li").animate({opacity:0.2},200);
    })
    oOLi1.on("click",function () {
        var index=$(this).index()
        //点击运动
        oUl1.stop().animate({left:-index*339},500)
        $(this).css({background: "#f15c18"}).siblings("li").css({background: "#777777"})
        topNum=index;
        topLi=index;
    })
//设置定时器
    var topBanner=setInterval(Run,2000)
    var topNum=0;
    var topLi=0
    function Run() {
        topNum++;
        if(topNum==6){
            topNum=1;
            oUl1.css({left:0});
        }
        oUl1.stop().animate({left:-topNum*339},500)
        topLi++;
        if(topLi==4){
            topLi=-1
        }
        oOLi1.eq(topLi).css({background: "#f15c18"}).siblings("li").css({background: "#777777"});
    }
    oUl1.on("mouseenter",function () {
        clearInterval(topBanner);
    })
    oUl1.on("mouseleave",function () {
        topBanner=setInterval(Run,2000);
    })


//二楼运动
    $("#floor-top .wrapper>div:nth-of-type(2)").find(".top-ul1").find("li").on("mouseenter",function () {
        $(this).css({borderTop:"2px solid #f15c18",borderLeft:"1px solid #f15c18",borderRight:" 1px solid #f15c18",borderBottom:"2px solid #fff"}).siblings("li").css({border:0,borderBottom: "2px solid #f15c18",});
        var index=$(this).index();
        if(index==0){
            $("#floor-top .wrapper>div:nth-of-type(2)").find(".center-c").css({display:"block",});
            $("#floor-top .wrapper>div:nth-of-type(2)").find(".center-r").css({display:"none",});
        }
        if(index==1 || index==2 || index==3){
            $("#floor-top .wrapper>div:nth-of-type(2)").find(".center-r").css({display:"block",});
            $("#floor-top .wrapper>div:nth-of-type(2)").find(".center-c").css({display:"none",});
        }
    })
//轮播图二楼
    var oUl2=$("#floor-top .wrapper>div:nth-of-type(2)").find(".top-banner").find("ul")
    var oOLi2=$("#floor-top .wrapper>div:nth-of-type(2)").find(".top-banner").find("ol").find("li");
    var Opacity2=$("#floor-top .wrapper>div:nth-of-type(2)").find(".center-r").find("ul").find("li");
//透明效果
    Opacity2.on("mouseenter",function () {
        $(this).stop().animate({opacity:1},200).siblings("li").animate({opacity:0.2},200);
    })

    oOLi2.on("click",function () {
        var index=$(this).index()
        //点击运动
        oUl2.stop().animate({left:-index*339},500)
        $(this).css({background: "#f15c18"}).siblings("li").css({background: "#777777"})
        topNum2=index;
        topLi2=index;
    })
    var topBanner2=setInterval(Run2,2000)
    var topNum2=0;
    var topLi2=0
    function Run2() {
        topNum2++;
        if(topNum2==6){
            topNum2=1;
            oUl2.css({left:0});
        }
        oUl2.stop().animate({left:-topNum2*339},500)
        topLi2++;
        if(topLi2==4){
            topLi2=-1
        }
        oOLi2.eq(topLi2).css({background: "#f15c18"}).siblings("li").css({background: "#777777"});
    }
    oUl2.on("mouseenter",function () {
        clearInterval(topBanner2);
    })
    oUl2.on("mouseleave",function () {
        topBanner2=setInterval(Run2,2000);
    })


//三楼运动
    $("#floor-top .wrapper>div:nth-of-type(3)").find(".top-ul1").find("li").on("mouseenter",function (){
        $(this).css({borderTop:"2px solid #f15c18",borderLeft:"1px solid #f15c18",borderRight:" 1px solid #f15c18",borderBottom:"2px solid #fff"}).siblings("li").css({border:0,borderBottom: "2px solid #f15c18",});
        var index=$(this).index();
        if(index==0){
            $("#floor-top .wrapper>div:nth-of-type(3)").find(".center-c").css({display:"block",});
            $("#floor-top .wrapper>div:nth-of-type(3)").find(".center-r").css({display:"none",});
        }
        if(index==1 || index==2 || index==3){
            $("#floor-top .wrapper>div:nth-of-type(3)").find(".center-r").css({display:"block",});
            $("#floor-top .wrapper>div:nth-of-type(3)").find(".center-c").css({display:"none",});
        }
    });

//轮播图三楼
    var oUl3=$("#floor-top .wrapper>div:nth-of-type(3)").find(".top-banner").find("ul")
    var oOLi3=$("#floor-top .wrapper>div:nth-of-type(3)").find(".top-banner").find("ol").find("li");
    var Opacity3=$("#floor-top .wrapper>div:nth-of-type(3)").find(".center-r").find("ul").find("li");

//透明效果
    Opacity3.on("mouseenter",function () {
        $(this).stop().animate({opacity:1},200).siblings("li").animate({opacity:0.2},200);
    })
    oOLi3.on("click",function () {
        var index=$(this).index()
        //点击运动
        oUl3.stop().animate({left:-index*339},500)
        $(this).css({background: "#f15c18"}).siblings("li").css({background: "#777777"})
        topNum3=index;
        topLi3=index;
    })
    var topBanner3=setInterval(Run3,2000)
    var topNum3=0;
    var topLi3=0
    function Run3() {
        topNum3++;
        if(topNum3==6){
            topNum3=1;
            oUl3.css({left:0});
        }
        oUl3.stop().animate({left:-topNum3*339},500)
        topLi3++;
        if(topLi3==4){
            topLi3=-1
        }
        oOLi3.eq(topLi3).css({background: "#f15c18"}).siblings("li").css({background: "#777777"});
    }
    oUl3.on("mouseenter",function () {
        clearInterval(topBanner3);
    })
    oUl3.on("mouseleave",function () {
        topBanner3=setInterval(Run3,2000);
    })



//后两楼
//四楼
    $("#floor-bottom .wrapper>div:nth-of-type(1)").find(".bottom-ul").find("li").on("mouseenter",function (){
        $(this).css({borderTop:"2px solid #f15c18",borderLeft:"1px solid #f15c18",borderRight:" 1px solid #f15c18",borderBottom:"2px solid #fff"}).siblings("li").css({border:0,borderBottom: "2px solid #f15c18",});
        var index=$(this).index();
        if(index==0){
            $("#floor-bottom .wrapper>div:nth-of-type(1)").find(".center-c").css({display:"block",})
            $("#floor-bottom .wrapper>div:nth-of-type(1)").find(".center-r").css({display:"none",})
        };
        if(index==1 || index==2 || index==3){
            $("#floor-bottom .wrapper>div:nth-of-type(1)").find(".center-r").css({display:"block",})
            $("#floor-bottom .wrapper>div:nth-of-type(1)").find(".center-c").css({display:"none",})
        }
    });
    var oUl4=$("#floor-bottom .wrapper>div:nth-of-type(1)").find(".bottom-banner").find("ul");
    var oOLi4=$("#floor-bottom .wrapper>div:nth-of-type(1)").find(".bottom-banner").find("ol").find("li")
    var Opacity4=$("#floor-bottom .wrapper>div:nth-of-type(1)").find(".center-r").find("ul").find("li");


//透明效果

    Opacity4.on("mouseenter",function () {
        $(this).stop().animate({opacity:1},200).siblings("li").stop().animate({opacity:0.2},200);
    });

    Opacity4.parents("ul").on("mouseleave",function () {
        $(this).find("li").css({opacity:1})
    })


    oOLi4.on("click",function () {
        var index=$(this).index();
        oUl4.stop().animate({left:-index*439},500)
        $(this).css({"background":"#f15c18"}).siblings("li").css({"background":"#777777"});
        bottomNum=index;
        bottomLi=index;
    })
//定时器
    var bottomRun=setInterval(Run4,2000);
    var bottomNum=0;
    var bottomLi=0;
    function Run4() {
        bottomNum++
        bottomLi++
        if(bottomNum==6){
            bottomNum=1;
            oUl4.css({left:0})
        }
        oUl4.stop().animate({left:-bottomNum*439},500)
        if(bottomLi==4){
            bottomLi=-1
        }
        oOLi4.eq(bottomLi).css({background: "#f15c18"}).siblings("li").css({background: "#777777"})
    }
    oUl4.on("mouseenter",function () {
        clearInterval(bottomRun);
    })

    oUl4.on("mouseleave",function () {
        bottomRun=setInterval(Run4,2000);
    })

//五楼
    $("#floor-bottom .wrapper>div:nth-of-type(2)").find(".bottom-ul").find("li").on("mouseenter",function (){
        console.log(111);
        $(this).css({borderTop:"2px solid #f15c18",borderLeft:"1px solid #f15c18",borderRight:" 1px solid #f15c18",borderBottom:"2px solid #fff"}).siblings("li").css({border:0,borderBottom: "2px solid #f15c18",});
        var index=$(this).index();
        if(index==0){
            $("#floor-bottom .wrapper>div:nth-of-type(2)").find(".center-c").css({display:"block",})
            $("#floor-bottom .wrapper>div:nth-of-type(2)").find(".center-r").css({display:"none",})
        };
        if(index==1 || index==2 || index==3){
            $("#floor-bottom .wrapper>div:nth-of-type(2)").find(".center-r").css({display:"block",})
            $("#floor-bottom .wrapper>div:nth-of-type(2)").find(".center-c").css({display:"none",})
        }

    });


    var oUl5=$("#floor-bottom .wrapper>div:nth-of-type(2)").find(".bottom-banner").find("ul");
    var oOLi5=$("#floor-bottom .wrapper>div:nth-of-type(2)").find(".bottom-banner").find("ol").find("li")
    var Opacity5=$("#floor-bottom .wrapper>div:nth-of-type(2)").find(".center-r").find("ul").find("li");
//透明效果
    Opacity5.on("mouseenter",function () {
        $(this).stop().animate({opacity:1},200).siblings("li").stop().animate({opacity:0.2},200);
    });
    Opacity5.parents("ul").on("mouseleave",function () {
        $(this).find("li").css({opacity:1})
    })



    oOLi5.on("click",function () {
        var index=$(this).index();
        oUl5.stop().animate({left:-index*439},500)
        $(this).css({"background":"#f15c18"}).siblings("li").css({"background":"#777777"});
        bottomNum5=index;
        bottomLi5=index;
    })
    var bottomRun5=setInterval(Run5,2000);
    var bottomNum5=0;
    var bottomLi5=0;
    function Run5() {
        bottomNum5++
        bottomLi5++
        if(bottomNum5==6){
            bottomNum5=1;
            oUl5.css({left:0})
        }
        oUl5.stop().animate({left:-bottomNum5*439},500)
        if(bottomLi5==4){
            bottomLi5=-1
        }
        oOLi5.eq(bottomLi5).css({background: "#f15c18"}).siblings("li").css({background: "#777777"})
    }
    oUl5.on("mouseenter",function () {
        clearInterval(bottomRun5);
    })

    oUl5.on("mouseleave",function () {
        bottomRun5=setInterval(Run5,2000);
    })



    $("#aside").on("click",function () {
            $('body,html').animate({scrollTop:0},500);
    })


    //json形式添加内容
    $.ajax({
        url:"../json/index.json",
        type:"get",
        success:function (res) {
            //头部轮播图
            for (var i = 0; i <5; i++) {
                //创建一个图片标签
                var Img=$("<img>");
                Img.attr("src",res[i].banner1);
                //创建a标签
                var A=$("<a href='#'></a>");
                A.append(Img);
                //创建一个li标签
                var Li=$("<li></li>")
                Li.append(A)
                $("#banner").find("ul").append(Li);
            };

            //商品介绍
            for (var i = 5; i < 9; i++) {
                //创建一个图片标签
                var Img=$("<img>");
                Img.attr("src",res[i].img);
                var H3=$("<h3></h3>")
                H3.html(res[i].h3);
                var H5=$("<h5></h5>")
                H5.html(res[i].h5);
                //创建a标签
                var A=$("<a href='#'></a>");
                A.append(H3);
                A.append(H5);
                A.append(Img);
                //创建一个li标签
                var Li=$("<li></li>")
                Li.append(A)

                Li.on("mouseenter",function () {
                    $(this).find("h3").stop().animate({top:35},300)
                    $(this).find("h5").stop().animate({top:60},300)
                    $(this).find("img").stop().animate({right:35},300)
                })
                //移出返回
                Li.on("mouseleave",function () {
                    $(this).find("h3").stop().animate({top:25},300)
                    $(this).find("h5").stop().animate({top:50},300)
                    $(this).find("img").stop().animate({right:10},300)
                })

                $("#introduce").find("ul").append(Li)

            }

            //品牌特卖
            for (var i = 9; i < 13; i++) {
                //创建一个图片标签
                var Img=$("<img>");
                Img.attr("src",res[i].special);
                //创建a标签
                var A=$("<a href='#'></a>");
                A.append(Img);
                //创建一个li标签
                var Li=$("<li></li>")
                Li.append(A)
                $("#special").find("ul").append(Li);
            }


            //前三楼
            for (var i = 13; i < 15; i++) {
                var Img=$("<img>");
                Img.attr("src",res[i].shensu1);
                //创建a标签
                var A=$("<a></a>");
                A.append(Img);
                //创建一个li标签
                var Li=$("<li></li>");
                Li.append(A);
                Li.on("click",function () {
                    var href=$(this).find("img").attr("src");
                    window.location.href = "detail.html?src="+href;

                });

                $("#floor-top .center-c>ul:nth-of-type(1)").append(Li);
            }
            for (var i = 15; i < 19; i++) {
                var Img=$("<img>");
                Img.attr("src",res[i].shensu2);
                //创建a标签
                var A=$("<a href='#'></a>");
                A.append(Img);
                //创建一个li标签
                var Li=$("<li></li>");
                Li.append(A)
                $("#floor-top .center-c>ul:nth-of-type(2)").append(Li);
            }
            for (var i = 19; i < 31; i++) {
                var Img=$("<img>");
                Img.attr("src",res[i].shensu3);
                //创建a标签
                var A=$("<a href='#'></a>");
                A.append(Img);
                //创建一个li标签
                var Li=$("<li></li>");
                Li.append(A)
                $("#floor-top .top-banner>ul").append(Li);
            }
            for (var i = 31; i < 41; i++) {
                var Img=$("<img>");
                Img.attr("src",res[i].shensu4);
                //创建a标签
                var A=$("<a href='#'></a>");
                A.append(Img);

                //创建a标签
                var B=$("<a href='#'></a>");
                B.html(res[i].a);

                //创建一个span
                var Sp=$("<span></span>");
                Sp.html(res[i].price)
                //创建一个p标签
                var P=$("<p></p>")
                P.append(Sp);

                //创建一个li标签
                var Li=$("<li></li>");
                Li.append(A);
                Li.append(B);
                Li.append(P);
                $("#floor-top .center-r>ul").append(Li);
            }



        }
    });











})

















